<template>
  <div class="iframe-container">
    <transition v-if="currentMenu?.menuType === 'iframe'" mode="out-in" name="fade">
      <iframe
        v-show="currentMenu?.menuType === 'iframe'"
        :src="currentMenu?.oriURL"
        allow="fullscreen"
        referrerpolicy="no-referrer"
      ></iframe>
    </transition>
  </div>
</template>
<script lang="ts" setup>
import { useMenuStore } from '@/stores/menu'

const menuStore = useMenuStore()

const currentMenu = computed(() => {
  return menuStore.currentMenu as IframeItem | undefined
})
</script>

<style lang="scss" scoped>
.iframe-container {
  iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  .link-class {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .el-icon {
      font-size: 100px;
      color: var(--el-color-primary);
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
}
</style>
